float right image pushes down text in table below in IE9 [migrated]

Posted by Cheers and hth. - Alf on Pro Webmasters See other posts from Pro Webmasters or by Cheers and hth. - Alf
Published on 2012-06-28T22:35:54Z Indexed on 2012/06/29 3:24 UTC
Read the original article Hit count: 1000

Filed under:
|
|
|

I'm not a webmaster, not even a web developer, but I'm tasked with adding content to a Wordpress site developed by Someone Else(TM).

Here's a page illustrating the problem: http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/.

It shows up nice in Firefox:

Firefox renders it as I expect

But in IE9 the floated picture pushed down the text in the table below, so that it looks rather awful:

enter image description here

I found some related questions on the web, e.g. "CSS: Float right in IE doesn't work!" and "why does a floating DIV mess up table positioning?", and the suggestions there led me to set clear: none on the div around the table, the table itself, and then each individual tr and finally even on each individual td. I also set width="99%" on the table, and tried (but I don't know how correctly) to apply the IE6 quirk fix margin-right: -3px.

So here's the content as written in Wordpress, including the unsuccessful attempted fixes:

<h1><div style="float: right"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" width="200" height="242" class="size-full wp-image-671"/></a></div>Fiskekonkurranse i Hovden!</h1>
<div style="background-color: #FAF0F0; clear: none;"><table width="99%" style="clear: none; right-margin: -3px;">
  <tr style=" clear: none;">
    <td style="text-align: left; clear: none;">Dato:</td>
    <td style="text-align: left; clear: none;">Lørdag 21.juli</td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; padding-left: 2em";  clear: none;>/ barn, Flytebrygga</td>
    <td style="text-align: left; clear: none;">15.00 &ndash; 16.00</td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; padding-left: 2em;  clear: none;">/ voksne (over 12 år), Moloen</td>
    <td style="text-align: left; clear: none;">15.00 &ndash; 17.00 </td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; clear: none;">Sted:</td>
    <td style="text-align: left; clear: none;">Hovden</td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; clear: none;">Pris:</td>
    <td style="text-align: left; clear: none;">voksen (over 12 år) kr. 50,-, barn kr. 30,-</td>
  </tr style=" clear: none;">
  <tr>
    <td style="text-align: left; clear: none;">Arrangør:</td>
    <td style="text-align: left; clear: none;">Hovden Grendelag</td>
  </tr>
</table></div>

Velkommen til den årlige Fiskekonkurransen i Hovden lørdag 21. juli!

<a href="http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/fiskekonkurranse-2011-bilde-nedskalertjpg/" rel="attachment wp-att-672"><img src="http://www.reginedagan.no/wp-content/uploads/2012/03/fiskekonkurranse-2011-bilde-nedskalertjpg.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011"  width="400" height="267" class="alignleft size-full wp-image-672" /></a>Det blir stangfiske fra moloen og egen barnekonkurranse fra flytebrygga.

Premiering for størst fisk, størst antall kg og flest antall stk. Premiering for barn kl. 16:30 på moloen. Alle premieres. Premiering for voksne på festen om kvelden.

Salg av pølser og brus, vafler og kaffe, samt sluker.

<div style="clear: left; border: 1px dashed gray; padding: 1em;">
Fest på Hovden samfunnshus kl. 21 &ndash; 02. 
Musikk: «Mister West», Steinar Aarsnes, Andøya. CC.
Salg av øl/vin og snacks.
</div>

VEL MØTT &mdash; SKITT FISKE!

And the resulting HTML served to a browser (only the relevant first part):

<div style="float: right;"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" class="size-full wp-image-671" height="242" width="200"></a></div>
<p>Fiskekonkurranse i Hovden!</p></h1>
<div style="background-color: rgb(250, 240, 240); clear: none;">
<table style="clear: none;" width="99%">
<tbody><tr style="clear: none;">
<td style="text-align: left; clear: none;">Dato:</td>
<td style="text-align: left; clear: none;">Lørdag 21.juli</td>
</tr>

The able to reproduce the effect with simpler code by setting clear: right on the table. However, I'm unable to reproduce the effect with default styling or with clear: none (as above). So it seems maybe it's something Wordpress does, or maybe it's something the theme thing or whatever it is does – but it's very similar to what others have observed, so there is strong indication that it's also a quirk in IE.

Help?

© Pro Webmasters or respective owner

Related posts about css

Related posts about images